<template>
  <div class="container">
    <menu-item></menu-item>
    <div class="content-wrap">
      <div class="content">
        <div class="table-wrap">
          <div v-if="tableList.length>0" class="table">
            <div class="tab">
              <span class="sort">序号</span>
              <span class="shanghu">图片</span>
              <span class="hao">商品名</span>
              <span class="fanwei">价格</span>
              <span class="dengji">价格趋势</span>
              <span class="num">热销程度</span>
            </div>
            <el-scrollbar
              element-loading-background="transparent"
              v-loading="loading"
            >
              <div class="item-wrap">
                <div
                  v-for="(item, index) in tableList"
                  :key="index"
                  class="item"
                >
                  <span class="sort">{{ index + 1 }}</span>
                  <span class="photo">
                    <img
                      :src="
                        'https://yscompany.oss-cn-hangzhou.aliyuncs.com/' +
                        item.pic
                      "
                      alt=""
                    />
                  </span>
                  <span class="name">{{ item.commday }}</span>
                  <span class="price">{{ item.shangpjage + item.danwei }}</span>
                  <span class="qushi">
                    <img
                      v-if="item.jcqs == 0"
                      src="@img/cjgl/cjgs_26.png"
                      alt="" />
                    <img
                      v-if="item.jcqs == 1"
                      src="@img/cjgl/cjgs_36.png"
                      alt=""
                  /></span>
                  <span class="dengji">
                    <img
                      v-for="i in item.rxcd * 1"
                      :key="i"
                      src="@img/cxgs/cxgs_13.png"
                      alt=""
                    />
                    <img
                      v-for="i in 5 - item.rxcd"
                      :key="i"
                      src="@img/cxgs/cxgs_10.png"
                      alt=""
                    />
                  </span>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <van-empty v-else description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import menuItem from "@/components/common/menuItem.vue";
import { getCJGL } from "@/apis/subjectInfo";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const router = useRouter();
let loading = ref(false);
const tabList = ref();
const tableList = ref([]);
const getList = () => {
  loading.value = true;
  getCJGL().then((res) => {
    tableList.value = res.data;
    loading.value = false;
  });
};
getList();
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content-wrap {
    flex: 1;
    height: 520px;
    display: flex;
    flex-direction: column;
    .content {
      padding-top: 20px;
      height: 450px;
      .table-wrap {
        height: 100%;
        .table {
          height: 420px;
          .tab {
            height: 40px;
            line-height: 40px;
            background: #4cc1ef;
            border-top-left-radius: 23px;
            border-top-right-radius: 23px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            color: #fff;
            font-size: 15px;
            span {
              display: inline-block;
            }
          }
          .item-wrap {
            height: 400px;
          }
          .el-scrollbar {
            height: 100%;
          }
          .item {
            height: 54px;
            line-height: 54px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            color: #000;
            font-size: 15px;
            background: #c0edff;
            &:nth-child(2n-1) {
              background: #fff;
            }
            span {
              display: inline-block;
              font-size: 12px;
              position: relative;
            }
            .sort {
              width: 25px;
              text-align: center;
            }
            .photo {
              display: flex;
              align-items: center;
              img {
                width: 50px;
                height: 45px;
              }
            }
            .name {
              width: 50px;
              position: relative;
              text-align: center;
              left: -8px;
            }
            .price {
              width: 60px;
              position: relative;
              text-align: center;
              left: -14px;
            }
            .qushi {
              display: flex;
              align-items: center;
              position: relative;
              text-align: center;
              left: -7px;
              img {
                width: 25px;
                height: 25px;
              }
            }
            .dengji {
              position: relative;
              text-align: center;
              left: 12px;
              img {
                width: 16px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
